<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情展示</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <style>
        .product-gallery {
            margin-bottom: 20px;
        }
        .product-gallery img {
            border-radius: 8px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: transform 0.3s;
        }
        .product-gallery img:hover {
            transform: scale(1.02);
        }
        .thumbnail {
            width: 80px;
            height: 80px;
            object-fit: cover;
            margin-right: 10px;
            border: 2px solid transparent;
        }
        .thumbnail.active {
            border-color: #0d6efd;
        }
        .product-info {
            padding: 20px;
        }
        .product-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .product-price {
            font-size: 28px;
            color: #e63946;
            margin-bottom: 15px;
        }
        .original-price {
            text-decoration: line-through;
            color: #6c757d;
            font-size: 18px;
            margin-left: 10px;
        }
        .product-meta {
            margin-bottom: 20px;
        }
        .product-meta span {
            margin-right: 15px;
            color: #6c757d;
        }
        .product-actions {
            margin-top: 30px;
        }
        .quantity-control {
            display: inline-flex;
            align-items: center;
            margin-right: 15px;
        }
        .quantity-control input {
            width: 60px;
            text-align: center;
        }
        .product-description {
            margin-top: 40px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
        }
        .tab-content {
            padding: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <div class="row">
            <!-- 商品图片展示区 -->
            <div class="col-lg-6">
                <div class="product-gallery">
                    <!-- 主图 -->
                    <img id="mainImage" src="https://via.placeholder.com/600x600" class="img-fluid" alt="商品主图">
                    
                    <!-- 缩略图 -->
                    <div class="d-flex">
                        <img src="https://via.placeholder.com/600x600" class="thumbnail active" onclick="changeImage(this)" alt="商品图1">
                        <img src="https://via.placeholder.com/600x600?text=图2" class="thumbnail" onclick="changeImage(this)" alt="商品图2">
                        <img src="https://via.placeholder.com/600x600?text=图3" class="thumbnail" onclick="changeImage(this)" alt="商品图3">
                        <img src="https://via.placeholder.com/600x600?text=图4" class="thumbnail" onclick="changeImage(this)" alt="商品图4">
                    </div>
                </div>
            </div>
            
            <!-- 商品信息区 -->
            <div class="col-lg-6">
                <div class="product-info">
                    <h1 class="product-title">优质商品名称</h1>
                    
                    <div class="product-price">
                        ¥399.00 <span class="original-price">¥499.00</span>
                        <span class="badge bg-danger ms-2">限时优惠</span>
                    </div>
                    
                    <div class="product-meta">
                        <span>销量: 1256件</span>
                        <span>库存: 98件</span>
                        <span>评分: ★★★★☆ (4.5)</span>
                    </div>
                    
                    <div class="product-variants mb-4">
                        <h6>选择规格：</h6>
                        <div class="btn-group" role="group">
                            <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
                            <label class="btn btn-outline-primary" for="option1">S码</label>
                            
                            <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
                            <label class="btn btn-outline-primary" for="option2">M码</label>
                            
                            <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off">
                            <label class="btn btn-outline-primary" for="option3">L码</label>
                            
                            <input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
                            <label class="btn btn-outline-primary" for="option4">XL码</label>
                        </div>
                    </div>
                    
                    <div class="product-actions">
                        <div class="quantity-control">
                            <button class="btn btn-outline-secondary" onclick="changeQuantity(-1)">-</button>
                            <input type="number" class="form-control mx-2" value="1" min="1" max="99" id="quantity">
                            <button class="btn btn-outline-secondary" onclick="changeQuantity(1)">+</button>
                        </div>
                        
                        <button class="btn btn-primary btn-lg me-2">
                            <i class="bi bi-cart"></i> 加入购物车
                        </button>
                        
                        <button class="btn btn-outline-danger btn-lg">
                            <i class="bi bi-heart"></i> 收藏
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 商品详情选项卡 -->
        <div class="product-description">
            <ul class="nav nav-tabs" id="productTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab">商品详情</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="specs-tab" data-bs-toggle="tab" data-bs-target="#specs" type="button" role="tab">规格参数</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button" role="tab">用户评价</button>
                </li>
            </ul>
            
            <div class="tab-content" id="productTabsContent">
                <div class="tab-pane fade show active" id="details" role="tabpanel">
                    <h4>商品描述</h4>
                    <p>这里是商品的详细描述内容。可以包含商品的材质、工艺、特点等详细信息。</p>
                    <p>示例文本：本商品采用优质材料制作，经过严格的质量控制，确保每一件产品都达到最高标准。设计简约大方，适合各种场合使用。</p>
                    <img src="https://via.placeholder.com/800x400" class="img-fluid my-3" alt="详情图1">
                    <img src="https://via.placeholder.com/800x400?text=详情图2" class="img-fluid my-3" alt="详情图2">
                </div>
                
                <div class="tab-pane fade" id="specs" role="tabpanel">
                    <h4>规格参数</h4>
                    <table class="table">
                        <tbody>
                            <tr>
                                <th scope="row">品牌</th>
                                <td>示例品牌</td>
                            </tr>
                            <tr>
                                <th scope="row">材质</th>
                                <td>优质棉</td>
                            </tr>
                            <tr>
                                <th scope="row">颜色</th>
                                <td>白色/黑色/蓝色</td>
                            </tr>
                            <tr>
                                <th scope="row">尺寸</th>
                                <td>S/M/L/XL</td>
                            </tr>
                            <tr>
                                <th scope="row">重量</th>
                                <td>约0.5kg</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <div class="tab-pane fade" id="reviews" role="tabpanel">
                    <h4>用户评价</h4>
                    <div class="card mb-3">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <h5 class="card-title">用户A</h5>
                                <div class="text-warning">★★★★☆</div>
                            </div>
                            <p class="card-text">商品质量很好，穿着舒适，下次还会购买！</p>
                            <small class="text-muted">2023-05-15</small>
                        </div>
                    </div>
                    <div class="card mb-3">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <h5 class="card-title">用户B</h5>
                                <div class="text-warning">★★★☆☆</div>
                            </div>
                            <p class="card-text">商品不错，但发货速度有点慢。</p>
                            <small class="text-muted">2023-05-10</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 自定义脚本 -->
    <script>
        // 切换主图
        function changeImage(element) {
            document.getElementById('mainImage').src = element.src;
            document.querySelectorAll('.thumbnail').forEach(img => {
                img.classList.remove('active');
            });
            element.classList.add('active');
        }
        
        // 修改数量
        function changeQuantity(change) {
            const quantityInput = document.getElementById('quantity');
            let quantity = parseInt(quantityInput.value);
            quantity += change;
            if (quantity < 1) quantity = 1;
            if (quantity > 99) quantity = 99;
            quantityInput.value = quantity;
        }
    </script>
</body>
</html>